
<template>
  <el-card style="width: 100%;" class="Comment">
    <template #header>
      <div class="header">
        <span>广告管理</span>
      </div>
      <div class="main-box" v-loading.fullscreen.lock="loadingflag">
        <div class="text-box">
          <div class="title">通告栏</div>
          <div class="callborad">
            <div class="call-box">
              <!-- <Plus />
                  <el-icon ><Plus /></el-icon> -->
              <img src="@/assets/horn.png" alt="">
              <div class="scroll-box">
                <div class="text">{{ showText.text }}</div>
              </div>
            </div>
          </div>
          <div class="tab-box">

            <div class="tag" v-for="item, index in textData" @click="alterText(item.id, index)" :key="item.id">
              <el-tag size="large" round :type="item.type ? 'primary' : 'info'" :closable="alterflag"
                @close="deleteText(item.id, index)">
                {{ item.text }}
              </el-tag>

            </div>
            <el-button v-if="alterflag" type="info" circle plain :icon="Plus" @click="dialogfalg = true"></el-button>
          </div>
          <div class="footer">
            <span v-if="alterflag" slot="footer" style="width: 100%; display: flex; justify-content: flex-end;">
              <el-button @click="alterflag = false">取 消</el-button>
              <el-button type="primary" @click="putShowText">确 定</el-button>
            </span>
            <span v-else slot="footer" style="width: 100%; display: flex; justify-content: flex-end;">
              <el-button type="primary" @click="alterflag = true">修 改</el-button>
            </span>
          </div>
        </div>
        <div class="show-box">
          <div class="title">轮播图</div>
          <div class="slide-box">
            <el-carousel teleported="true" style="max-width: 800px;" :interval="4000" type="card" height="200px">
              <el-carousel-item v-for="item in showImgList" :key="item.id">
                <el-image :src="item.url" fit="cover" teleported="true" style="width: 100%;height: 100%;"></el-image>
              </el-carousel-item>
            </el-carousel>
          </div>
          <dib class="slide-list">
            <div class="title">轮播图展示</div>
            <div class="list-box">

              <div v-if="showImgList.length" v-for="(item, index) in showImgList" :key="item.id" class="img-box">
                <el-image :src="item.url" fit="cover" hide-on-click-modal teleported="true"
                  :preview-src-list="previewList(showImgList)" 
                  style="width:250px;height: 150px;border-radius: 6px;z-index: 99999999;"></el-image>
              </div>

              <el-empty style="margin: 0 auto;" v-else description="无图片"></el-empty>

            </div>
          </dib>
          <div class="upload-box">
            <div class="title">轮播图库</div>
            <div class="box-list">

              <div v-for="(item, index) in slideImgList" :key="index" class="img-box"
                :style="{ border: item.type ? '2px solid rgb(44, 243, 120)' : '2px solid rgba(44, 243, 120,0)' }">
                <el-button v-if="imgAlterflag" title="点击删除图片" @click="delteSlideImg(item.id, index)" class="check-icon"
                  type="danger" :icon="Delete" circle />
                <img title="点击展示或禁用" @click="uploadShowType(item.id, index)" :src="item.url" alt="" class="s-img">
              </div>
              <el-upload v-if="imgAlterflag" style="margin: 5px;" @click="AddShowimg" title="点击上传" :action="host"
                list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove"  :show-file-list="false"
                :on-success="handsuccess">
                <el-icon>
                  <Plus />
                </el-icon>
              </el-upload>
            </div>
          </div>
          <div class="footer">
            <span v-if="imgAlterflag" slot="footer" style="width: 100%; display: flex; justify-content: flex-end;">
              <el-button @click="imgAlterflag = false">取 消</el-button>
              <el-button type="primary" @click="alterShowtype">确 定</el-button>
            </span>
            <span v-else slot="footer" style="width: 100%; display: flex; justify-content: flex-end;">
              <el-button type="primary" @click="imgAlterflag = true">修 改</el-button>
            </span>
          </div>
        </div>
      </div>
      <el-dialog v-model="dialogVisible">
        <img style="width: 100%;" :src="dialogImageUrl" alt="Preview Image" />
      </el-dialog>
      <el-dialog v-model="dialogfalg" width="500" title="新增通告栏文本" align-center>
        <el-form :model="uploadTextData" :rules="rules">
          <el-form-item label="通告栏文本" prop="text">
            <el-input v-model="uploadTextData.text" />
          </el-form-item>
        </el-form>
        <span slot="footer" style="width: 100%; display: flex; justify-content: flex-end;">
          <el-button @click="dialogfalg = false">取 消</el-button>
          <el-button type="primary" @click="createText">确 定</el-button>
        </span>
      </el-dialog>

    </template>
  </el-card>
  

</template>
<script setup lang="ts">
import { ref, computed, reactive } from 'vue'
import { Plus, Delete } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { createTextapi, deleteTextapi, putShowTextapi, getTextapi, putSlideShowapi, getSlideShowapi, deleteSlideShowapi } from '@/api/advertising'
import 'element-plus/dist/index.css'

//-------SSE----------
// const ssescoket = new EventSource('http')
// ssescoket.onopen = (e)=>{
// console.log('connet',e);
// }
// ssescoket.onmessage = (e)=>{
// console.log('accept',e);
// }
// ssescoket.onerror = (e)=>{
// console.log('close',e);
// }
//-----------------

const alterShowtype = async () => {
  new_id.value = showImgList.value.map(item => item.id)
  const res = await putSlideShowapi({
    new_id: new_id.value,
    old_id: old_id.value
  })
  if (res.code == 200) {
    ElMessage.success('修改成功')
  }
  else {
    ElMessage.error('修改失败')
  }
  imgAlterflag.value = false
}
const uploadShowType = (id, index) => {
  if (!imgAlterflag.value) return;
  console.log('showtype', id, index);
  slideImgList.value[index].type = !slideImgList.value[index].type
  if (slideImgList.value[index].type) {
    showImgList.value.push({
      id: id,
      url: slideImgList.value[index].url,
      type: slideImgList.value[index].type
    })
  }
  else {

    for (let i = 0; i < showImgList.value.length; i++) {
      if (showImgList.value[i].id == id) {
        showImgList.value.splice(i, 1)
      }
    }

  }
}
const delteSlideImg = (id, index) => {
  console.log('delete', id, index);
  if (slideImgList.value[index].type) {
    slideImgList.value.splice(index, 1)
    for (let i = 0; i < showImgList.value.length; i++) {
      if (showImgList.value[i].id == id) {
        showImgList.value.splice(i, 1)
      }
    }
  }
  else {
    slideImgList.value.splice(index, 1)
  }
  const res = deleteSlideShowapi({ id: id })
  if (res.code == 200) {
    ElMessage.success('删除成功')
  }
  else {
    ElMessage.error('删除失败')
  }
}
const AddShowimg = () => {
  console.log('click');

}

const new_id = ref([])
const old_id = ref([])
const host = ref('http://132.232.132.248:8880/api/adminpc/advertising/slideshow/image/')
const handleRemove = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles)
  console.log(slideImgList.value)
}
const dialogImageUrl = ref('')
const dialogVisible = ref(false)
const handlePictureCardPreview = (uploadFile) => {
  console.log('iiiii', uploadFile.url)
  dialogImageUrl.value = uploadFile.url
  dialogVisible.value = true

}
const handsuccess = (response, uploadFile, uploadFiles) => {
  console.log('ok', response, uploadFile, uploadFiles)
  // slideImgList.value.pop()
  slideImgList.value.push({ id: response.id, url: response.url, type: false })
  console.log(slideImgList.value)
}
//预览图列表计算
const previewList = computed(() => (arr) => {
  const res_arr = []
  for (let i = 0; i < arr.length; i++) {
    res_arr.push(arr[i].url)
  }
  return res_arr
})
const showImgList = ref([
  {
    id: 1,
    url: 'http://43.138.132.222:8886/group1/M00/00/02/CtM3BVrRdLGARgBAAAVslh9vkK00474545',
    type: true
  },
  {
    id: 2,
    url: 'http://43.138.132.222:8886/group1/M00/00/02/CtM3BVrRdLGARgBAAAVslh9vkK00474545',
    type: true
  },
  {
    id: 3,
    url: 'http://43.138.132.222:8886/group1/M00/00/02/CtM3BVrRdLGARgBAAAVslh9vkK00474545',
    type: true
  },
  {
    id: 4,
    url: 'http://43.138.132.222:8886/group1/M00/00/02/CtM3BVrRdLGARgBAAAVslh9vkK00474545',
    type: true
  },
  {
    id: 5,
    url: 'http://43.138.132.222:8886/group1/M00/00/02/CtM3BVrRdLGARgBAAAVslh9vkK00474545',
    type: true
  },

])

const slideImgList = ref([
  {
    id: 1,
    url: 'http://43.138.132.222:8886/group1/M00/00/02/CtM3BVrRdLGARgBAAAVslh9vkK00474545',
    type: true
  },
  {
    id: 2,
    url: 'http://43.138.132.222:8886/group1/M00/00/02/CtM3BVrRdLGARgBAAAVslh9vkK00474545',
    type: true
  },
  {
    id: 3,
    url: 'http://43.138.132.222:8886/group1/M00/00/02/CtM3BVrRdLGARgBAAAVslh9vkK00474545',
    type: true
  },
  {
    id: 4,
    url: 'http://43.138.132.222:8886/group1/M00/00/02/CtM3BVrRdLGARgBAAAVslh9vkK00474545',
    type: true
  },
  {
    id: 5,
    url: 'http://43.138.132.222:8886/group1/M00/00/02/CtM3BVrRdLGARgBAAAVslh9vkK00474545',
    type: true
  },
  {
    id: 6,
    url: 'http://43.138.132.222:8886/group1/M00/00/02/CtM3BVrRdLGARgBAAAVslh9vkK00474545',
    type: false
  },
  {
    id: 7,
    url: 'http://43.138.132.222:8886/group1/M00/00/02/CtM3BVrRdLGARgBAAAVslh9vkK00474545',
    type: false
  },
  {
    id: 8,
    url: 'http://43.138.132.222:8886/group1/M00/00/02/CtM3BVrRdLGARgBAAAVslh9vkK00474545',
    type: false
  },
  {
    id: 9,
    url: 'http://43.138.132.222:8886/group1/M00/00/02/CtM3BVrRdLGARgBAAAVslh9vkK00474545',
    type: false
  },
])
const initializeText = async () => {
  const res = await getTextapi()
  if (res.code == 200) {
    textData.value = res.data.list
    for (let i = 0; i < textData.value.length; i++) {
      if (textData.value[i].type) {
        uploadId.value.new_id = textData.value[i].id
        showText.value.id = textData.value[i].id,
          showText.value.text = textData.value[i].text
        showText.value.index = i
      }
    }
  }
  else {
    ElMessage.error('获取滚动文字失败')

  }
}
initializeText()
const initializeImg = async () => {
  const res = await getSlideShowapi()
  if (res.code == 200) {
    slideImgList.value = res.data.list
    showImgList.value = slideImgList.value.filter(item => item.type)
    old_id.value = showImgList.value.map(item => item.id)
    console.log('old_id', old_id.value);
  }
  else {
    ElMessage.error('获取轮播图失败')
  }

}
initializeImg()
const loadingflag = ref(false)
const alterflag = ref(false)
const imgAlterflag = ref(false)
const dialogfalg = ref(false)
const uploadTextData = ref({
  text: ''
})
const rules = reactive({
  text: [
    { required: true, message: '请入通告栏文本', trigger: 'blur' }
  ]
})
const putShowText = async () => {
  loadingflag.value = true
  const res = await putShowTextapi(uploadId.value)
  if (res.code == 200) {
    ElMessage.success('修改成功')
    alterflag.value = false
  }
  else {
    ElMessage.error('修改失败')
  }
  loadingflag.value = false

}
const createText = async () => {
  loadingflag.value = true
  const res = await createTextapi({ text: uploadTextData.value.text })
  if (res.code == 200) {
    textData.value.push({
      id: res.data.id,
      text: uploadTextData.value.text,
      type: false
    })
    ElMessage.success('添加成功')
  }
  else {
    ElMessage.error('添加失败')
  }
  dialogfalg.value = false
  loadingflag.value = false
}
const uploadId = ref({
  new_id: 0,
  old_id: 0,
})
const showText = ref({
  id: 1,
  text: '新年新气象，立减999元',
  index: 0
})
//修改通告文字
const alterText = (id, index) => {
  if (!alterflag.value) return
  console.log('alter', id, index);
  //更改原来的id
  uploadId.value.old_id = showText.value.id
  uploadId.value.new_id = id
  //更改textData中的type
  textData.value[showText.value.index].type = false
  textData.value[index].type = true
  //更改通告栏文字
  showText.value.id = id
  showText.value.text = textData.value[index].text
  showText.value.index = index
}
const textData = ref([
  {
    id: 5,
    text: '新年新气象，立减999元',
    type: true
  },
  {
    id: 7,
    text: '龙年应好运，年年有好景',
    type: false
  },

])
const deleteText = async (id, index) => {
  console.log('delet', id)
  loadingflag.value = true
  const res = await deleteTextapi({ id: id })
  if (res.code == 200) {
    textData.value.splice(index, 1)
    ElMessage.success('删除成功')
  }
  else {
    ElMessage.error('删除失败')
  }
  loadingflag.value = false

}
</script>
<style lang="scss" scoped>
* {
  user-select: none;
}

.Comment {
  min-height: 100%;
  box-sizing: border-box;

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: black;
    padding: 0px 0px 15px 0px;

    border-bottom: 1px solid black;
  }

  .main-box {
    margin: 10px 10px;

    .title {
      padding: 10px 0px;
    }

    .text-box {

      .callborad {
        .call-box {
          display: flex;
          width: 200px;
          padding: 3px;
          background-color: rgb(243, 153, 44);

          img {
            width: 25px;
            height: 25px;
            margin: 0px 3px;
          }

          .scroll-box {

            overflow: hidden;

            // background-color: aqua;
            .text {
              text-wrap: nowrap;
              transition: 0.5s;
              animation: scrollText 4s linear infinite;

              @keyframes scrollText {
                0% {
                  transform: translateX(100%);
                }

                100% {
                  transform: translateX(-100%);
                }
              }
            }

          }
        }
      }

      .tab-box {
        width: 500px;
        display: flex;
        align-items: center;
        flex-wrap: wrap;

        .tag {
          margin: 10px 20px 10px 0px;
        }
      }
    }

    .show-box {
      .slide-box {}

      .slide-list {
        .list-box {
          display: flex;
          flex-wrap: wrap;

          .img-box {
            position: relative;
            margin: 8px;
            border-radius: 6px;
            border: 0.5px solid rgba(0, 0, 0, 0.3);

          }
        }
      }

      .upload-box {
        .box-list {
          display: flex;
          flex-wrap: wrap;

          .img-box {
            position: relative;
            width: 148px;
            height: 148px;
            border-radius: 6px;
            margin: 5px;
            transition: .5s;

            &:hover {
              .check-icon {
                opacity: 1;
              }
            }

            .check-icon {
              opacity: 0;
              width: 24px;
              height: 24px;
              position: absolute;
              right: -12px;
              top: -12px;
              // background-image: linear-gradient(45deg,rgba(0,0,0,0) 50%,rgb(29, 247, 95) 50%);
            }

            .s-img {
              width: 100%;
              height: 100%;
              border-radius: 6px;
              object-fit: cover;
            }
          }
        }
      }

    }
  }
}
</style>
  